<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>表单</title>
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
  <script type="text/javascript" src="../../assets/lib/iframe-resizer-3.6.3/iframeResizer.contentWindow.min.js"></script>
  <link href="../../assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="../../assets/css/froala_blocks.min.css" rel="stylesheet" type="text/css">
</head>

<body>
  <section id="form_submit" class="fdb-block" style="background-image: url(images/alt_wide_1.svg)">
    <div class="container">
      <template v-if="pageType === 'form'">
        <div class="row">
          <div class="col-12 col-md-8 col-lg-7 col-xl-5 text-left">
            <div class="row">
              <div class="col">
                <h1>{{ title }}</h1>
                <p class="text-h3" v-html="description"></p>
              </div>
            </div>
            <div v-for="fieldInfo in fieldInfoList" class="row mt-4">
              <div class="col">
                <template v-if="fieldInfo.fieldType === 'TextArea'">
                  <textarea :placeholder="fieldInfo.title" v-model="fieldInfo.value" class="form-control" :style="'height: ' + (fieldInfo.height ? fieldInfo.height : 125) + 'px;'"
                    :name="fieldInfo.title" v-validate="fieldInfo.validate" :class="{'is-invalid': errors.has(fieldInfo.title)}"></textarea>
                </template>
                <template v-else-if="fieldInfo.fieldType === 'CheckBox' && fieldInfo.columns === 0">
                  <div class="m-2">
                    <span v-for="(item, index) in fieldInfo.items" class="checkbox checkbox-primary">
                      <input type="checkbox" v-model="fieldInfo.value" :id="fieldInfo.title + '_' + item.id" :value="item.value"
                        :name="fieldInfo.title" v-validate="fieldInfo.validate">
                      <label :for="fieldInfo.title + '_' + item.id" class="mr-2"> {{ item.value }} </label>
                    </span>
                  </div>
                </template>
                <template v-else-if="fieldInfo.fieldType === 'CheckBox' && fieldInfo.columns === 1">
                  <div class="m-2">
                    <div v-for="(item, index) in fieldInfo.items" class="checkbox checkbox-primary">
                      <input type="checkbox" v-model="fieldInfo.value" :id="fieldInfo.title + '_' + item.id" :value="item.value"
                        :name="fieldInfo.title" v-validate="fieldInfo.validate">
                      <label :for="fieldInfo.title + '_' + item.id" class="mr-2"> {{ item.value }} </label>
                    </div>
                  </div>
                </template>
                <template v-else-if="fieldInfo.fieldType === 'Radio' && fieldInfo.columns === 0">
                  <div class="m-2">
                    <span v-for="(item, index) in fieldInfo.items" class="radio radio-primary">
                      <input type="radio" v-model="fieldInfo.value" :id="item.value" :value="item.value" :name="fieldInfo.title"
                        v-validate="fieldInfo.validate">
                      <label :for="item.value" class="mr-2"> {{ item.value }} </label>
                    </span>
                  </div>
                </template>
                <template v-else-if="fieldInfo.fieldType === 'Radio' && fieldInfo.columns === 1">
                  <div class="m-2">
                    <div v-for="(item, index) in fieldInfo.items" class="radio radio-primary">
                      <input type="radio" v-model="fieldInfo.value" :id="item.value" :value="item.value" :name="fieldInfo.title"
                        v-validate="fieldInfo.validate">
                      <label :for="item.value" class="mr-2"> {{ item.value }} </label>
                    </div>
                  </div>
                </template>
                <template v-else-if="fieldInfo.fieldType === 'SelectOne'">
                  <select :name="fieldInfo.title" v-model="fieldInfo.value" class="form-control" :class="{'is-invalid': errors.has(fieldInfo.title) }"
                    v-validate="fieldInfo.validate">
                    <option v-for="item in fieldInfo.items" :value="item.value">{{ item.value }}</option>
                  </select>
                </template>
                <template v-else-if="fieldInfo.fieldType === 'SelectMultiple'">
                  <select multiple style="height: 130px" :name="fieldInfo.title" v-model="fieldInfo.value" class="form-control"
                    :class="{'is-invalid': errors.has(fieldInfo.title) }" v-validate="fieldInfo.validate">
                    <option v-for="item in fieldInfo.items" :value="item.value">{{ item.value }}</option>
                  </select>
                </template>
                <template v-else-if="fieldInfo.fieldType === 'Image'">
                  <file-pond
                    :allow-multiple="false"
                    :server="getUploadUrl(fieldInfo)"
                    :files="files"
                    accepted-file-types="image/jpeg, image/png, image/webp"
                    label-idle="点击上传或将图片拖动至此区域..."
                    label-file-processing="上传中..."
                    label-file-processing-complete="上传成功"
                    v-on:processfile="imageUploaded"
                    v-on:removefile="imageRemoved(fieldInfo)"
                  ></file-pond>
        
                  <input
                    v-model="fieldInfo.value"
                    type="hidden"
                    :name="fieldInfo.title"
                    v-validate="fieldInfo.validate"
                    :class="{'is-invalid': errors.has(fieldInfo.title)}"
                  />
                </template>
                <template v-else-if="fieldInfo.fieldType === 'Date'">
                  <date-picker :placeholder="fieldInfo.title" style="width: 100%" :name="fieldInfo.title" v-model="fieldInfo.value"
                    type="date" format="YYYY年MM月DD日" :minute-step="1" :clearable="false" :editable="false" v-validate="fieldInfo.validate"></date-picker>
                </template>
                <template v-else-if="fieldInfo.fieldType === 'DateTime'">
                  <date-picker :placeholder="fieldInfo.title" style="width: 100%" :name="fieldInfo.title" v-model="fieldInfo.value"
                    type="datetime" format="YYYY年MM月DD日 HH:mm" :minute-step="1" :clearable="false" :editable="false"
                    v-validate="fieldInfo.validate"></date-picker>
                </template>
                <template v-else>
                  <input :placeholder="fieldInfo.title" v-model="fieldInfo.value" type="text" class="form-control"
                    :name="fieldInfo.title" v-validate="fieldInfo.validate" :class="{'is-invalid': errors.has(fieldInfo.title)}">
                </template>
                <small v-show="errors.has(fieldInfo.title)" class="text-danger">{{ errors.first(fieldInfo.title) }}</small>
              </div>
            </div>
            <div v-if="isCaptcha" class="row mt-3">
              <div class="col">
                <div class="clearfix">
                  <input v-model="captcha" type="text" class="form-control float-left" style="width:180px; margin-right: 10px"
                    name="captcha" data-vv-as="验证码" v-validate="'required'" :class="{'is-invalid':
errors.has('captcha') || captchaInValid}">
                  <img :src="captchaUrl" @click="loadCaptcha" class="float-left" style="width: 105px; height: 38px" />
                </div>
                <small v-show="errors.has('captcha')" class="text-danger">{{ errors.first('captcha') }}</small>
                <small v-show="captchaInValid" class="text-danger">验证码不正确，请重新输入！</small>
              </div>
            </div>
            <div class="row mt-4">
              <div class="col text-center">
                <button type="submit" @click="btnSubmitClick" class="btn">提 交</button>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-else-if="pageType === 'error'">
        <div class="row mb-2 text-center justify-content-center">
          <div class="col-12 col-md-8 col-lg-7">
            <p class="text-h3 text-danger">{{ errorMessage }}</p>
          </div>
        </div>
      </template>
      <template v-else-if="pageType === 'success'">
        <div class="row mb-2 text-center justify-content-center">
          <div class="col-12 col-md-8 col-lg-7">
            <p class="text-h3 text-success">表单提交成功！</p>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="text-center" style="margin-top: 100px">
          <img class="mt-3" src="../../assets/images/loading.gif" />
          <p class="lead mt-3 text-nowrap">载入中，请稍后...</p>
        </div>
      </template>
      <div class="row-100"></div>
    </div>
    <div class="container-fluid p-0">
    </div>
  </section>
</body>

</html>
<script src="../../assets/lib/lodash-4.17.10.min.js"></script>
<script src="../../assets/lib/vue-2.5.16.min.js" type="text/javascript"></script>
<script src="../../assets/lib/vee-validate-2.1.0.js"></script>
<script src="../../assets/lib/vee-validate-locale-zh_CN-2.1.0.js"></script>
<script src="../../assets/lib/es6-promise.auto.min.js" type="text/javascript"></script>
<script src="../../assets/lib/axios-0.18.0.min.js"></script>
<script src="../../assets/lib/vue2-datepicker-2.4.3.min.js"></script>

<link href="../../assets/lib/filepond/filepond-4.4.2.min.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/lib/filepond/filepond-plugin-image-preview-4.1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="../../assets/lib/filepond/babel-polyfill-7.4.4.min.js"></script>
<script src="../../assets/lib/filepond/filepond-polyfill-1.0.4.min.js"></script>
<script src="../../assets/lib/filepond/filepond-plugin-file-validate-type-1.2.4.min.js"></script>
<script src="../../assets/lib/filepond/filepond-plugin-image-preview-4.1.0.js"></script>
<script src="../../assets/lib/filepond/filepond-4.4.2.min.js"></script>
<script src="../../assets/lib/filepond/vue-filepond-5.1.0.min.js"></script>

<script src="../../assets/js/submit.js" type="text/javascript"></script>
